<template>
	<view class="add-post-container" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
			</view>
			<view class="nav-center">
				<text class="nav-title">编辑帖子</text>
			</view>
			<view class="nav-right">
				<!-- 移除草稿按钮 -->
			</view>
		</view>

		<scroll-view class="content-scroll" scroll-y>
			<view class="form-container">


				<!-- 图片上传 -->
				<view class="form-section">
					<ImageUploader v-model="postImages" v-model:cover-image="coverImage" :max-images="9" />
				</view>

				<!-- 帖子标题 -->
				<view class="form-section">
					<view class="input-wrapper">
						<input v-model="postForm.postTitle" class="title-input" placeholder="标题" maxlength="100"
							placeholder-class="placeholder-style" />
						<view class="char-count">{{ postForm.postTitle?.length || 0 }}/100</view>
					</view>
				</view>

				<!-- 帖子内容 -->
				<view class="form-section">
					<view class="textarea-wrapper">
						<textarea v-model="postForm.postContent" class="content-textarea" placeholder="内容"
							maxlength="2000" auto-height placeholder-class="placeholder-style" />
						<view class="char-count">{{ postForm.postContent?.length || 0 }}/2000</view>
					</view>
				</view>

				<!-- 选择圈子 -->
				<view class="form-section">
					<view class="section-header">
						<view class="section-icon">🏷️</view>
						<text class="section-title">选择圈子</text>
						<text class="section-required">*</text>
					</view>
					<view class="select-wrapper">
						<uni-combox v-model="selectedCircleName" :candidates="candidates" placeholder="请选择一个圈子"
							@input="handleCircleChange" class="circle-select" />
					</view>
				</view>

				<!-- 选择标签 -->
				<view class="form-section">
					<view class="section-header">
						<view class="section-icon">🏷️</view>
						<text class="section-title">添加标签</text>
						<text class="section-subtitle">（可选择多个）</text>
						<view class="add-tag-btn" v-if="selectedCircle" @click="showAddTagModal = true">
							<text class="add-tag-text">+ 新建标签</text>
						</view>
					</view>

					<!-- 已有标签 -->
					<view v-if="tagOptions.length > 0" class="tags-section">
						<view class="tags-section-title">已有标签</view>
						<view class="tags-grid">
							<view v-for="tag in tagOptions" :key="tag.id"
								:class="['tag-chip', { 'tag-active': selectedTags.includes(tag.id) }]"
								@click="toggleTag(tag.id)">
								<text class="tag-text">{{ tag.tagName }}</text>
								<view v-if="tag.tagCategory" class="tag-category">{{ tag.tagCategory }}</view>
								<view v-if="selectedTags.includes(tag.id)" class="tag-check">✓</view>
							</view>
						</view>
					</view>

					<!-- 新创建的标签 -->
					<view v-if="newlyCreatedTags.length > 0" class="tags-section">
						<view class="tags-section-title">新创建标签</view>
						<view class="tags-grid">
							<view v-for="tag in newlyCreatedTags" :key="'new-' + tag.id"
								:class="['tag-chip', 'tag-new', { 'tag-active': selectedTags.includes(String(tag.id)) }]"
								@click="toggleTag(String(tag.id))">
								<text class="tag-text">{{ tag.tagName }}</text>
								<view v-if="tag.tagCategory" class="tag-category">{{ tag.tagCategory }}</view>
								<view v-if="selectedTags.includes(String(tag.id))" class="tag-check">✓</view>
							</view>
						</view>
					</view>

					<!-- 无标签提示 -->
					<view v-if="tagOptions.length === 0 && newlyCreatedTags.length === 0" class="no-tags">
						<text class="no-tags-text">暂无标签，点击上方按钮创建新标签</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部发布按钮 -->
		<view class="publish-footer">
			<view class="publish-info">
				<text class="publish-text">{{ canPublish ? '准备更新' : '请完善信息' }}</text>
			</view>
			<view class="button-group">
				<button class="delete-button" @click="deletePost" :disabled="isDeleting">
					<view v-if="isDeleting" class="loading-spinner"></view>
					<text class="delete-btn-text">{{ isDeleting ? '删除中' : '删除' }}</text>
				</button>
				<button class="publish-button" :class="{ 'publish-disabled': !canPublish || isPublishing }"
					@click="publishPost" :disabled="!canPublish || isPublishing">
					<view v-if="isPublishing" class="loading-spinner"></view>
					<text class="publish-btn-text">{{ isPublishing ? '更新中' : '更新' }}</text>
				</button>
			</view>
		</view>

		<!-- 新建标签模态框 -->
		<view v-if="showAddTagModal" class="modal-overlay" @click="closeAddTagModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">新建标签</text>
					<view class="modal-close" @click="closeAddTagModal">×</view>
				</view>

				<view class="modal-body">
					<!-- 标签名称 -->
					<view class="form-group">
						<text class="form-label">标签名称 *</text>
						<input v-model="newTagForm.tagName" class="form-input" placeholder="请输入标签名称" maxlength="20" />
						<view class="char-count">{{ newTagForm.tagName?.length || 0 }}/20</view>
					</view>

					<!-- 标签分类 -->
					<view class="form-group">
						<text class="form-label">标签分类</text>
						<view class="category-selector">
							<!-- 现有分类选择 -->
							<view v-if="tagCategories.length > 0" class="existing-categories">
								<text class="category-subtitle">选择现有分类：</text>
								<view class="category-chips">
									<view v-for="category in tagCategories" :key="category"
										:class="['category-chip', { 'category-active': newTagForm.tagCategory === category }]"
										@click="selectCategory(category)">
										<text class="category-text">{{ category }}</text>
									</view>
								</view>
							</view>

							<!-- 自定义分类输入 -->
							<view class="custom-category">
								<text class="category-subtitle">或创建新分类：</text>
								<input v-model="customCategory" class="form-input" placeholder="请输入新分类名称" maxlength="15"
									@input="handleCustomCategoryInput" />
								<view class="char-count">{{ customCategory?.length || 0 }}/15</view>
							</view>
						</view>
					</view>

				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeAddTagModal">取消</button>
					<button class="confirm-btn" :class="{ 'btn-disabled': !canCreateTag || isCreatingTag }"
						@click="createNewTag" :disabled="!canCreateTag || isCreatingTag">
						<view v-if="isCreatingTag" class="loading-spinner small"></view>
						<text>{{ isCreatingTag ? '创建中' : '创建' }}</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { setPostAndTag, getInfoByCircleId, addTag, getTagCategory, getInfoByPostId, deletePostTagsRelByList } from '@/api/tag/tag'
	import { getCircleList, insertCircleTagsRel } from '@/api/circle/circle'
	import { updatePost, getPost, delPost } from '@/api/post/post'
	import type { PostTagRel, TagsInfo } from '@/api/tag/tag'
	import type { CircleBasicInfo, CircleTagsRel } from '@/api/circle/circle'
	import type { PostBasicInfo } from '@/api/post/post'
	import ImageUploader from './components/ImageUploader.vue'

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getWindowInfo()

	const postId = ref()

	// 前端使用的图片数组（用于组件操作）
	const postImages = ref<Array<{ url : string, order : number }>>([])
	const coverImage = ref<string>('')



	// 表单数据
	const postForm = ref<Partial<PostBasicInfo>>({
		id: undefined,
		postTitle: '',
		postContent: '',
		circleId: undefined,
		postImages: '', // 后端需要的字符串格式
		coverImage: ''
	})

	// 圈子相关数据
	const circleOptions = ref<CircleBasicInfo[]>([])
	const candidates = ref<string[]>([])
	const selectedCircle = ref<CircleBasicInfo | null>(null)

	// 计算属性：当前选中的圈子名称
	const selectedCircleName = computed({
		get: () => selectedCircle.value?.circleName || '',
		set: (value : string) => {
			// 当用户直接输入或选择时，通过 handleCircleChange 处理
			handleCircleChange(value)
		}
	})

	// 标签相关数据
	const tagOptions = ref<TagsInfo[]>([])
	const selectedTags = ref<string[]>([])
	const newlyCreatedTags = ref<TagsInfo[]>([])

	// 新增：记录回显时的帖子标签关系表（旧数组）
	const originalPostTagRels = ref<PostTagRel[]>([])

	// 新建标签相关数据
	const showAddTagModal = ref(false)
	const tagCategories = ref<string[]>([])
	const newTagForm = ref({
		tagName: '',
		tagCategory: ''
	})
	const customCategory = ref('')
	const isCreatingTag = ref(false)

	// 状态控制
	const isPublishing = ref(false)
	const isDeleting = ref(false)

	// 计算属性 - 判断是否可以发布
	const canPublish = computed(() => {
		return !!(
			postForm.value.postTitle?.trim() &&
			postForm.value.postContent?.trim() &&
			selectedCircle.value &&
			postImages.value.length > 0 &&  // 使用前端数组检查
			coverImage.value
		)
	})

	// 计算属性 - 判断是否可以创建标签
	const canCreateTag = computed(() => {
		return !!(
			newTagForm.value.tagName?.trim() &&
			(newTagForm.value.tagCategory?.trim() || customCategory.value?.trim())
		)
	})

	// 返回按钮
	const goBack = () => {
		uni.navigateBack()
	}

	// 加载圈子列表
	const loadCircleList = async () => {
		try {
			const response = await getCircleList()
			if (response.code === 200) {
				circleOptions.value = response.rows || response.data || []
				candidates.value = circleOptions.value.map(circle => circle.circleName)
			}
		} catch (error) {
			console.error('加载圈子列表失败:', error)
			showToast('加载圈子列表失败')
		}
	}

	// 处理圈子选择变化
	const handleCircleChange = async (selectedName : string) => {
		// 清空标签选择和新创建的标签
		tagOptions.value = []
		selectedTags.value = []
		newlyCreatedTags.value = []

		if (!selectedName) {
			selectedCircle.value = null
			postForm.value.circleId = undefined
			return
		}

		const selectedCircleItem = circleOptions.value.find(
			circle => circle.circleName === selectedName
		)

		if (selectedCircleItem) {
			selectedCircle.value = selectedCircleItem
			postForm.value.circleId = selectedCircleItem.id
			await Promise.all([
				loadTagsByCircle(selectedCircleItem.id),
				loadTagCategories()
			])
		}
	}

	// 根据圈子ID加载标签
	const loadTagsByCircle = async (circleId : number) => {
		try {
			const response = await getInfoByCircleId(circleId)
			if (response.code === 200) {
				tagOptions.value = response.data || []
			}
		} catch (error) {
			console.error('加载标签失败:', error)
			showToast('加载标签失败')
		}
	}

	// 加载标签分类
	const loadTagCategories = async () => {
		try {
			const response = await getTagCategory()
			if (response.code === 200) {
				tagCategories.value = response.data || []
			}
		} catch (error) {
			console.error('加载标签分类失败:', error)
			showToast('加载标签分类失败')
		}
	}

	// 切换标签选择状态
	const toggleTag = (tagId : string) => {
		const index = selectedTags.value.indexOf(tagId)
		if (index > -1) {
			selectedTags.value.splice(index, 1)
		} else {
			selectedTags.value.push(tagId)
		}
	}

	// 关闭新建标签模态框
	const closeAddTagModal = () => {
		showAddTagModal.value = false
		// 重置表单
		newTagForm.value = {
			tagName: '',
			tagCategory: ''
		}
		customCategory.value = ''
	}

	// 选择现有分类
	const selectCategory = (category : string) => {
		newTagForm.value.tagCategory = category
		customCategory.value = '' // 清空自定义分类输入
	}

	// 处理自定义分类输入
	const handleCustomCategoryInput = () => {
		if (customCategory.value?.trim()) {
			newTagForm.value.tagCategory = customCategory.value.trim()
		}
	}

	// 创建新标签
	const createNewTag = async () => {
		if (!canCreateTag.value) {
			showToast('请填写必要信息')
			return
		}

		isCreatingTag.value = true

		try {
			// 使用自定义分类或选择的分类
			const finalCategory = customCategory.value?.trim() || newTagForm.value.tagCategory

			const tagData = {
				tagName: newTagForm.value.tagName.trim(),
				tagCategory: finalCategory
			}

			// 创建标签
			const addTagResponse = await addTag(tagData)

			if (addTagResponse.code === 200) {
				const newTagId = addTagResponse.data

				// 建立圈子与标签的关联
				if (selectedCircle.value) {
					const circleTagRel : CircleTagsRel = {
						circleId: selectedCircle.value.id,
						tagId: Number(newTagId)
					}
					await insertCircleTagsRel(circleTagRel)
				}

				// 创建新标签对象并添加到新创建标签列表
				const newTag : TagsInfo = {
					id: newTagId,
					tagName: tagData.tagName,
					tagCategory: tagData.tagCategory
				}

				newlyCreatedTags.value.push(newTag)

				// 自动选中新创建的标签
				selectedTags.value.push(String(newTagId))

				// 如果是新分类，添加到分类列表
				if (customCategory.value?.trim() && !tagCategories.value.includes(finalCategory)) {
					tagCategories.value.push(finalCategory)
				}

				showToast('标签创建成功', 'success')
				closeAddTagModal()
			} else {
				showToast(addTagResponse.msg || '标签创建失败')
			}
		} catch (error) {
			console.error('创建标签失败:', error)
			showToast('创建标签失败，请重试')
		} finally {
			isCreatingTag.value = false
		}
	}

	// 更新帖子
	const publishPost = async () => {
		if (!canPublish.value) {
			if (!postImages.value.length) {  // 使用前端数组检查
				showToast('请至少上传一张图片')
				return
			}
			if (!coverImage.value) {
				showToast('请选择封面图片')
				return
			}
			showToast('请填写完整信息')
			return
		}

		isPublishing.value = true

		try {
			// 转换图片数组为JSON字符串
			const submitData = {
				...postForm.value,
				postImages: JSON.stringify(postImages.value), // 转换为字符串
				coverImage: coverImage.value
			}

			// 更新帖子 - 使用updatePost替代addPost
			const postResponse = await updatePost(submitData)

			if (postResponse.code === 200) {
				const currentPostId = submitData.id || postResponse.data

				// 先删除旧的帖子标签关系
				if (originalPostTagRels.value.length > 0) {
					try {
						await deletePostTagsRelByList(originalPostTagRels.value)
						console.log('已删除旧的帖子标签关系:', originalPostTagRels.value)
					} catch (error) {
						console.error('删除旧标签关系失败:', error)
						// 继续执行，不中断流程
					}
				}

				// 设置新的帖子标签关联
				if (selectedTags.value.length > 0) {
					const postTagRelList : PostTagRel[] = selectedTags.value.map(tagId => ({
						postId: Number(currentPostId),
						tagId: Number(tagId)
					}))
					await setPostAndTag(postTagRelList)
					console.log('已设置新的帖子标签关系:', postTagRelList)
				}

				showToast('更新成功', 'success')

				// 延迟返回上一页，触发 postDetail.vue 的 onShow
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			} else {
				showToast(postResponse.msg || '更新失败')
			}
		} catch (error) {
			console.error('更新帖子失败:', error)
			showToast('更新失败，请重试')
		} finally {
			isPublishing.value = false
		}
	}

	// 删除帖子
	const deletePost = async () => {
		if (!postId.value) {
			showToast('帖子ID不存在')
			return
		}

		// 显示确认对话框
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这篇帖子吗？删除后无法恢复。',
			confirmText: '删除',
			cancelText: '取消',
			confirmColor: '#ff4757',
			success: async (res) => {
				if (res.confirm) {
					isDeleting.value = true

					try {
						// 先删除帖子标签关系
						if (originalPostTagRels.value.length > 0) {
							try {
								await deletePostTagsRelByList(originalPostTagRels.value)
								console.log('已删除帖子标签关系:', originalPostTagRels.value)
							} catch (error) {
								console.error('删除帖子标签关系失败:', error)
								// 继续执行删除帖子，不中断流程
							}
						}

						// 调用删除帖子API
						const response = await delPost(postId.value)

						if (response.code === 200) {
							showToast('删除成功', 'success')

							// 延迟返回上一页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/mine/mine'
								})
							}, 1500)
						} else {
							showToast(response.msg || '删除失败')
						}
					} catch (error) {
						console.error('删除帖子失败:', error)
						showToast('删除失败，请重试')
					} finally {
						isDeleting.value = false
					}
				}
			}
		})
	}

	// 统一的提示方法
	const showToast = (title : string, icon : 'success' | 'none' = 'none') => {
		uni.showToast({ title, icon })
	}

	// 加载帖子数据
	const loadPost = async () => {
		try {
			const response = await getPost(postId.value)

			if (response.code === 200 && response.data) {
				const postData = response.data
				console.log('帖子数据:', postData)
				console.log('圈子选项:', circleOptions.value)

				// 恢复基本信息
				postForm.value.postTitle = postData.postTitle || ''
				postForm.value.postContent = postData.postContent || ''
				postForm.value.circleId = postData.circleId
				postForm.value.id = postData.id || 0

				// 恢复图片信息
				if (postData.postImages) {
					try {
						postImages.value = JSON.parse(postData.postImages)
					} catch (e) {
						console.error('解析图片数据失败:', e)
					}
				}

				coverImage.value = postData.coverImage || ''

				// 根据 circleId 恢复圈子选择
				if (postData.circleId && postData.circleId !== 0) {
					const circle = circleOptions.value.find(c =>
						c.id === postData.circleId ||
						c.circleId === postData.circleId ||
						c.Id === postData.circleId
					)

					if (circle) {
						selectedCircle.value = circle
						postForm.value.circleId = postData.circleId
						// 加载该圈子的标签
						await Promise.all([
							loadTagsByCircle(postData.circleId),
							loadTagCategories()
						])

						// 加载帖子关联的标签并实现回显
						await loadPostTags(postData.id)
					} else {
						console.warn('未找到匹配的圈子，circleId:', postData.circleId)
						console.log('可用的圈子:', circleOptions.value.map(c => ({ id: c.id, circleId: c.circleId, name: c.circleName })))
					}
				} else {
					// circleId 为 0 或不存在时，清空圈子选择
					selectedCircle.value = null
					postForm.value.circleId = 0
					// 清空标签相关数据
					selectedTags.value = []
					newlyCreatedTags.value = []
				}

				showToast('帖子数据已加载', 'success')
			}
		} catch (error) {
			console.error('加载帖子数据失败:', error)
			showToast('加载帖子数据失败')
		}
	}

	// 修改：加载帖子关联的标签
	const loadPostTags = async (postId : number) => {
		try {
			const response = await getInfoByPostId(postId)
			if (response.code === 200 && response.data) {
				const postTags : TagsInfo[] = response.data
				console.log('帖子关联的标签:', postTags)

				// 将帖子关联的标签ID添加到selectedTags中
				selectedTags.value = postTags.map(tag => String(tag.id))
				console.log('已选中的标签ID:', selectedTags.value)

				// 记录原始的帖子标签关系（用于后续删除）
				originalPostTagRels.value = postTags.map(tag => ({
					postId: postId,
					tagId: Number(tag.id)
				}))
				console.log('记录的原始帖子标签关系:', originalPostTagRels.value)
			}
		} catch (error) {
			console.error('加载帖子标签失败:', error)
			// 不显示错误提示，因为可能是帖子没有关联标签
		}
	}



	// 页面加载时获取参数
	onLoad((options) => {
		if (options?.id) {
			postId.value = parseInt(options.id)
			console.log("获取的id", postId.value)
		}
	})

	// 页面加载时初始化
	onMounted(async () => {
		await loadCircleList()
		if (postId.value) {
			await loadPost() // 只有当有postId时才加载帖子数据
		}
	})
</script>

<style lang="scss" scoped>
	.add-post-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
		display: flex;
		flex-direction: column;
	}

	// 顶部导航栏
	.navbar {
		height: 112rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		position: sticky;
		top: 0;
		z-index: 100;

		.nav-left,
		.nav-right {
			width: 120rpx;
		}

		.nav-center {
			flex: 1;
			text-align: center;
		}

		.back-btn {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
			background: rgba(0, 0, 0, 0.04);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&:active {
				background: rgba(0, 0, 0, 0.08);
				transform: scale(0.95);
			}

			.icon-back.back-icon {
				font-size: 48rpx;
				color: #374151;
				font-weight: 600;
				line-height: 1;
			}
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #111827;
		}

		.draft-btn {
			font-size: 32rpx;
			color: #007AFF;
			font-weight: 500;
			transition: all 0.3s ease;

			&.saving {
				color: #999;
				pointer-events: none;
			}

			&:active {
				opacity: 0.7;
			}
		}
	}

	// 滚动内容区域
	.content-scroll {
		flex: 1;
		padding: 24rpx;
	}

	.form-container {
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
		overflow: hidden;
	}



	// 表单区块
	.form-section {
		padding: 40rpx 32rpx;
		border-bottom: 1rpx solid #f3f4f6;

		&:last-child {
			border-bottom: none;
		}
	}

	// 输入框包装器
	.input-wrapper {
		position: relative;

		.title-input {
			width: 100%;
			font-size: 36rpx;
			font-weight: 600;
			color: #111827;
			background: transparent;
			border: none;
			outline: none;
			padding: 0;
			line-height: 1.5;
			min-height: 108rpx;

			&.placeholder-style {
				color: #9ca3af;
				font-weight: 400;
			}
		}

		.char-count {
			position: absolute;
			right: 0;
			bottom: -32rpx;
			font-size: 24rpx;
			color: #9ca3af;
		}
	}

	// 文本域包装器
	.textarea-wrapper {
		position: relative;

		.content-textarea {
			width: 100%;
			min-height: 300rpx;
			font-size: 32rpx;
			color: #374151;
			background: transparent;
			border: none;
			outline: none;
			padding: 0;
			line-height: 1.6;
			resize: none;

			&.placeholder-style {
				color: #9ca3af;
			}
		}

		.char-count {
			position: absolute;
			right: 0;
			bottom: -32rpx;
			font-size: 24rpx;
			color: #9ca3af;
		}
	}

	// 区块标题
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;

		.section-icon {
			font-size: 36rpx;
			margin-right: 16rpx;
		}

		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #111827;
			margin-right: 8rpx;
		}

		.section-required {
			color: #ef4444;
			font-size: 32rpx;
		}

		.section-subtitle {
			font-size: 28rpx;
			color: #6b7280;
			margin-left: 8rpx;
		}

		.add-tag-btn {
			margin-left: auto;
			padding: 12rpx 24rpx;
			background: linear-gradient(135deg, #10b981 0%, #059669 100%);
			border-radius: 20rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			.add-tag-text {
				font-size: 26rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}

	// 选择器包装
	.select-wrapper {
		.circle-select {
			background: #f9fafb;
			border: 2rpx solid #e5e7eb;
			border-radius: 16rpx;
			padding: 24rpx;
			font-size: 30rpx;
			transition: all 0.3s ease;

			&:focus {
				border-color: #6366f1;
				background: #ffffff;
				box-shadow: 0 0 0 6rpx rgba(99, 102, 241, 0.1);
			}
		}
	}

	// 标签区块
	.tags-section {
		margin-bottom: 32rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.tags-section-title {
			font-size: 28rpx;
			color: #6b7280;
			font-weight: 500;
			margin-bottom: 16rpx;
		}
	}

	// 标签网格
	.tags-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.tag-chip {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx;
		background: #f3f4f6;
		border: 2rpx solid #e5e7eb;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #6b7280;
		transition: all 0.3s ease;
		position: relative;
		user-select: none;
		flex-direction: column;
		align-items: flex-start;
		min-width: 120rpx;

		&:active {
			transform: scale(0.95);
		}

		&.tag-new {
			border-color: #10b981;
			background: rgba(16, 185, 129, 0.1);
		}

		&.tag-active {
			background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
			border-color: #6366f1;
			color: #ffffff;
			padding-right: 56rpx;

			.tag-category {
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.tag-text {
			font-weight: 500;
		}

		.tag-category {
			font-size: 22rpx;
			color: #9ca3af;
			margin-top: 4rpx;
		}

		.tag-check {
			position: absolute;
			right: 16rpx;
			top: 16rpx;
			width: 32rpx;
			height: 32rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			font-weight: bold;
		}
	}

	// 无标签提示
	.no-tags {
		text-align: center;
		padding: 80rpx 0;

		.no-tags-text {
			font-size: 28rpx;
			color: #9ca3af;
		}
	}

	// 底部发布区域
	.publish-footer {
		height: 160rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-top: 1rpx solid rgba(0, 0, 0, 0.06);
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		position: sticky;
		bottom: 0;
		z-index: 100;

		.publish-info {
			flex: 1;

			.publish-text {
				font-size: 28rpx;
				color: #6b7280;
				font-weight: 500;
			}
		}

		.button-group {
			display: flex;
			gap: 24rpx;
			align-items: center;
		}

		.delete-button {
			height: 88rpx;
			padding: 0 32rpx;
			border-radius: 44rpx;
			background: #ff4757;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				background: #ff3742;
			}

			&:disabled {
				background: #fca5a5;
				transform: none;
			}

			.delete-btn-text {
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 600;
			}

			.loading-spinner {
				width: 32rpx;
				height: 32rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				border-top: 4rpx solid #ffffff;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
		}

		.publish-button {
			height: 88rpx;
			padding: 0 48rpx;
			border-radius: 44rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}

			&.publish-disabled {
				background: #d1d5db;
				transform: none;
			}

			.publish-btn-text {
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 600;
			}

			.loading-spinner {
				width: 32rpx;
				height: 32rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				border-top: 4rpx solid #ffffff;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	// 占位符样式
	.placeholder-style {
		color: #9ca3af !important;
	}

	// 深色模式适配
	@media (prefers-color-scheme: dark) {
		.add-post-container {
			background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
		}

		.navbar {
			background: rgba(15, 23, 42, 0.95);
			border-bottom-color: rgba(255, 255, 255, 0.1);

			.back-btn {
				background: rgba(255, 255, 255, 0.1);

				.icon-back {
					color: #e2e8f0;
				}
			}

			.nav-title {
				color: #f8fafc;
			}

			.draft-btn {
				background: rgba(99, 102, 241, 0.2);
				color: #a5b4fc;
			}
		}

		.form-container {
			background: #1e293b;
		}



		.form-section {
			border-bottom-color: #334155;
		}

		.input-wrapper .title-input {
			color: #f8fafc;

			&.placeholder-style {
				color: #64748b;
			}
		}

		.textarea-wrapper .content-textarea {
			color: #e2e8f0;

			&.placeholder-style {
				color: #64748b;
			}
		}

		.section-title {
			color: #f8fafc;
		}

		.section-subtitle {
			color: #94a3b8;
		}

		.char-count {
			color: #64748b;
		}

		.select-wrapper .circle-select {
			background: #334155;
			border-color: #475569;
			color: #e2e8f0;

			&:focus {
				background: #475569;
			}
		}

		.tag-chip {
			background: #334155;
			border-color: #475569;
			color: #cbd5e1;
		}

		.publish-footer {
			background: rgba(15, 23, 42, 0.95);
			border-top-color: rgba(255, 255, 255, 0.1);

			.publish-text {
				color: #94a3b8;
			}

			.delete-button:disabled {
				background: #475569;
			}

			.publish-button.publish-disabled {
				background: #475569;
			}
		}

		.placeholder-style {
			color: #64748b !important;
		}
	}

	// 模态框样式
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease;
	}

	.modal-content {
		width: 85%;
		max-width: 650rpx;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.2);
		animation: scaleIn 0.3s ease;
	}

	.modal-header {
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f3f4f6;

		.modal-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #111827;
		}

		.modal-close {
			font-size: 40rpx;
			color: #6b7280;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			transition: all 0.3s ease;

			&:active {
				background: rgba(0, 0, 0, 0.05);
				transform: scale(0.95);
			}
		}
	}

	.modal-body {
		padding: 32rpx;

		.form-group {
			margin-bottom: 32rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.form-label {
				display: block;
				font-size: 30rpx;
				font-weight: 500;
				color: #374151;
				margin-bottom: 16rpx;
			}

			.form-input {
				width: 100%;
				height: 88rpx;
				background: #f9fafb;
				border: 2rpx solid #e5e7eb;
				border-radius: 16rpx;
				padding: 0 24rpx;
				font-size: 30rpx;
				color: #111827;
				transition: all 0.3s ease;

				&:focus {
					border-color: #6366f1;
					background: #ffffff;
					box-shadow: 0 0 0 4rpx rgba(99, 102, 241, 0.1);
				}
			}
		}

		.category-selector {
			margin-top: 16rpx;

			.existing-categories,
			.custom-category {
				margin-bottom: 24rpx;
			}

			.category-subtitle {
				display: block;
				font-size: 26rpx;
				color: #6b7280;
				margin-bottom: 16rpx;
			}

			.category-chips {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
			}

			.category-chip {
				padding: 12rpx 24rpx;
				background: #f3f4f6;
				border: 2rpx solid #e5e7eb;
				border-radius: 40rpx;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
				}

				&.category-active {
					background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
					border-color: #6366f1;

					.category-text {
						color: #ffffff;
					}
				}

				.category-text {
					font-size: 26rpx;
					color: #4b5563;
					font-weight: 500;
				}
			}
		}
	}

	.modal-footer {
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20rpx;
		border-top: 1rpx solid #f3f4f6;

		.cancel-btn,
		.confirm-btn {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}
		}

		.cancel-btn {
			background: #f3f4f6;
			color: #4b5563;
			border: 2rpx solid #e5e7eb;

			&:active {
				background: #e5e7eb;
			}
		}

		.confirm-btn {
			background: linear-gradient(135deg, #10b981 0%, #059669 100%);
			color: #ffffff;
			box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.2);

			&:active {
				box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.2);
			}

			&.btn-disabled {
				background: #d1d5db;
				box-shadow: none;
				color: #9ca3af;
			}

			.loading-spinner.small {
				width: 24rpx;
				height: 24rpx;
				border: 3rpx solid rgba(255, 255, 255, 0.3);
				border-top: 3rpx solid #ffffff;
				margin-right: 12rpx;
			}
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes scaleIn {
		from {
			transform: scale(0.9);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	// 深色模式适配
	@media (prefers-color-scheme: dark) {
		.modal-content {
			background: #1e293b;
			box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.4);
		}

		.modal-header {
			border-bottom-color: #334155;

			.modal-title {
				color: #f8fafc;
			}

			.modal-close {
				color: #94a3b8;

				&:active {
					background: rgba(255, 255, 255, 0.1);
				}
			}
		}

		.modal-body {
			.form-group {
				.form-label {
					color: #e2e8f0;
				}

				.form-input {
					background: #334155;
					border-color: #475569;
					color: #f1f5f9;

					&:focus {
						background: #475569;
						border-color: #6366f1;
					}
				}
			}

			.category-selector {
				.category-subtitle {
					color: #94a3b8;
				}

				.category-chip {
					background: #334155;
					border-color: #475569;

					.category-text {
						color: #cbd5e1;
					}
				}
			}
		}

		.modal-footer {
			border-top-color: #334155;

			.cancel-btn {
				background: #334155;
				color: #cbd5e1;
				border-color: #475569;

				&:active {
					background: #475569;
				}
			}

			.confirm-btn.btn-disabled {
				background: #475569;
				color: #94a3b8;
			}
		}
	}
</style>